<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>历史查询记录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f5f7;
            overflow-x: hidden;
        }
        
        /* iOS状态栏 */
        .status-bar {
            height: 44px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            color: white;
            font-size: 15px;
            font-weight: 500;
        }
        
        .status-bar-left {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .status-bar-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        /* 导航栏 */
        .nav-bar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 15px 20px 20px;
            color: white;
        }
        
        .nav-title {
            font-size: 28px;
            font-weight: 700;
            text-align: center;
        }
        
        /* 内容区域 */
        .content {
            padding: 12px;
            padding-bottom: 100px;
        }
        
        /* 统计卡片 */
        .stats-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 16px;
            padding: 15px;
            color: white;
            margin-bottom: 12px;
            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
        }
        
        .stats-title {
            font-size: 13px;
            opacity: 0.9;
            margin-bottom: 6px;
        }
        
        .stats-number {
            font-size: 32px;
            font-weight: 700;
        }
        
        .stats-label {
            font-size: 13px;
            opacity: 0.8;
            margin-top: 3px;
        }
        
        /* 搜索栏 */
        .search-bar {
            background: white;
            border-radius: 12px;
            padding: 10px 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .search-icon {
            color: #9ca3af;
            font-size: 15px;
        }
        
        .search-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 14px;
            background: transparent;
        }
        
        /* 历史记录列表 */
        .history-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .history-item {
            background: white;
            border-radius: 12px;
            padding: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
        }
        
        .history-item:active {
            transform: scale(0.98);
            border-color: #667eea;
        }
        
        .item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .stock-info-header {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .stock-icon {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
        }
        
        .stock-name {
            font-size: 16px;
            font-weight: 700;
            color: #333;
        }
        
        .stock-code {
            font-size: 12px;
            color: #6b7280;
            margin-top: 2px;
        }
        
        .stock-price-main {
            text-align: right;
        }
        
        .current-price {
            font-size: 18px;
            font-weight: 700;
            color: #ef4444;
        }
        
        .price-change {
            font-size: 12px;
            margin-top: 2px;
        }
        
        .price-change.positive {
            color: #ef4444;
        }
        
        .price-change.negative {
            color: #10b981;
        }
        
        /* 数据网格 */
        .data-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
        }
        
        .data-item {
            background: #f9fafb;
            padding: 6px 8px;
            border-radius: 8px;
        }
        
        .data-label {
            font-size: 10px;
            color: #6b7280;
            margin-bottom: 3px;
        }
        
        .data-value {
            font-size: 13px;
            font-weight: 600;
            color: #333;
        }
        
        /* 时间标签 */
        .time-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: #f3f4f6;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 10px;
            color: #6b7280;
            margin-top: 8px;
        }
        
        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #9ca3af;
        }
        
        .empty-icon {
            font-size: 60px;
            margin-bottom: 15px;
            opacity: 0.5;
        }
        
        .empty-text {
            font-size: 16px;
            margin-bottom: 5px;
        }
        
        .empty-subtext {
            font-size: 14px;
            opacity: 0.8;
        }
        
        /* 底部TabBar */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            justify-content: space-around;
            padding: 10px 0 25px;
            border-top: 1px solid #e5e7eb;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }
        
        .tab-bar-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            color: #9ca3af;
            text-decoration: none;
            transition: color 0.2s;
        }
        
        .tab-bar-item.active {
            color: #667eea;
        }
        
        .tab-bar-icon {
            font-size: 24px;
        }
        
        .tab-bar-label {
            font-size: 11px;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <!-- iOS状态栏 -->
    <div class="status-bar">
        <div class="status-bar-left">
            <span>9:41</span>
        </div>
        <div class="status-bar-right">
            <i class="fas fa-signal"></i>
            <i class="fas fa-wifi"></i>
            <i class="fas fa-battery-three-quarters"></i>
        </div>
    </div>
    
    <!-- 导航栏 -->
    <div class="nav-bar">
        <div class="nav-title">📊 历史查询记录</div>
    </div>
    
    <!-- 主内容 -->
    <div class="content">
        <!-- 统计卡片 -->
        <div class="stats-card">
            <div class="stats-title">
                <i class="fas fa-chart-bar"></i> 查询统计
            </div>
            <div class="stats-number">8</div>
            <div class="stats-label">已查询股票数量</div>
        </div>
        
        <!-- 搜索栏 -->
        <div class="search-bar">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索股票名称或代码">
        </div>
        
        <!-- 历史记录列表 -->
        <div class="history-list">
            <!-- 记录1 -->
            <div class="history-item">
                <div class="item-header">
                    <div class="stock-info-header">
                        <div class="stock-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div>
                            <div class="stock-name">贵州茅台</div>
                            <div class="stock-code">sh600519</div>
                        </div>
                    </div>
                    <div class="stock-price-main">
                        <div class="current-price">¥1,650.50</div>
                        <div class="price-change positive">
                            <i class="fas fa-arrow-up"></i> +1.59%
                        </div>
                    </div>
                </div>
                
                <div class="data-grid">
                    <div class="data-item">
                        <div class="data-label">昨日开盘</div>
                        <div class="data-value">1,625.00</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">昨日收盘</div>
                        <div class="data-value">1,624.70</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">市盈率</div>
                        <div class="data-value">35.8</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">成交量</div>
                        <div class="data-value">123.45万</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">成交额</div>
                        <div class="data-value">20.38亿</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">总市值</div>
                        <div class="data-value">2.07万亿</div>
                    </div>
                </div>
                
                <div class="time-tag">
                    <i class="fas fa-clock"></i>
                    2025-10-06 14:30
                </div>
            </div>
            
            <!-- 记录2 -->
            <div class="history-item">
                <div class="item-header">
                    <div class="stock-info-header">
                        <div class="stock-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div>
                            <div class="stock-name">中国平安</div>
                            <div class="stock-code">sh601318</div>
                        </div>
                    </div>
                    <div class="stock-price-main">
                        <div class="current-price">¥45.80</div>
                        <div class="price-change negative">
                            <i class="fas fa-arrow-down"></i> -0.87%
                        </div>
                    </div>
                </div>
                
                <div class="data-grid">
                    <div class="data-item">
                        <div class="data-label">昨日开盘</div>
                        <div class="data-value">46.20</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">昨日收盘</div>
                        <div class="data-value">46.20</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">市盈率</div>
                        <div class="data-value">8.5</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">成交量</div>
                        <div class="data-value">2856.32万</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">成交额</div>
                        <div class="data-value">13.14亿</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">总市值</div>
                        <div class="data-value">8367亿</div>
                    </div>
                </div>
                
                <div class="time-tag">
                    <i class="fas fa-clock"></i>
                    2025-10-06 11:20
                </div>
            </div>
            
            <!-- 记录3 -->
            <div class="history-item">
                <div class="item-header">
                    <div class="stock-info-header">
                        <div class="stock-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div>
                            <div class="stock-name">招商银行</div>
                            <div class="stock-code">sh600036</div>
                        </div>
                    </div>
                    <div class="stock-price-main">
                        <div class="current-price">¥38.65</div>
                        <div class="price-change positive">
                            <i class="fas fa-arrow-up"></i> +2.13%
                        </div>
                    </div>
                </div>
                
                <div class="data-grid">
                    <div class="data-item">
                        <div class="data-label">昨日开盘</div>
                        <div class="data-value">37.80</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">昨日收盘</div>
                        <div class="data-value">37.84</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">市盈率</div>
                        <div class="data-value">7.2</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">成交量</div>
                        <div class="data-value">4523.87万</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">成交额</div>
                        <div class="data-value">17.52亿</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">总市值</div>
                        <div class="data-value">9726亿</div>
                    </div>
                </div>
                
                <div class="time-tag">
                    <i class="fas fa-clock"></i>
                    2025-10-05 15:45
                </div>
            </div>
            
            <!-- 记录4 -->
            <div class="history-item">
                <div class="item-header">
                    <div class="stock-info-header">
                        <div class="stock-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div>
                            <div class="stock-name">宁德时代</div>
                            <div class="stock-code">sz300750</div>
                        </div>
                    </div>
                    <div class="stock-price-main">
                        <div class="current-price">¥215.80</div>
                        <div class="price-change positive">
                            <i class="fas fa-arrow-up"></i> +3.25%
                        </div>
                    </div>
                </div>
                
                <div class="data-grid">
                    <div class="data-item">
                        <div class="data-label">昨日开盘</div>
                        <div class="data-value">209.00</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">昨日收盘</div>
                        <div class="data-value">209.00</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">市盈率</div>
                        <div class="data-value">28.6</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">成交量</div>
                        <div class="data-value">1826.54万</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">成交额</div>
                        <div class="data-value">39.43亿</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">总市值</div>
                        <div class="data-value">9464亿</div>
                    </div>
                </div>
                
                <div class="time-tag">
                    <i class="fas fa-clock"></i>
                    2025-10-05 10:15
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部TabBar -->
    <div class="tab-bar">
        <a href="#" class="tab-bar-item">
            <i class="fas fa-home tab-bar-icon"></i>
            <span class="tab-bar-label">查询</span>
        </a>
        <a href="#" class="tab-bar-item active">
            <i class="fas fa-history tab-bar-icon"></i>
            <span class="tab-bar-label">历史</span>
        </a>
    </div>
    
    <script>
        // 点击历史记录项的效果
        document.querySelectorAll('.history-item').forEach(item => {
            item.addEventListener('click', function() {
                // 添加视觉反馈
                this.style.backgroundColor = '#f9fafb';
                setTimeout(() => {
                    this.style.backgroundColor = 'white';
                }, 200);
                
                // 模拟跳转到主页面
                console.log('跳转到主页面并填充查询参数');
            });
        });
        
        // 搜索功能
        const searchInput = document.querySelector('.search-input');
        searchInput.addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            document.querySelectorAll('.history-item').forEach(item => {
                const stockName = item.querySelector('.stock-name').textContent.toLowerCase();
                const stockCode = item.querySelector('.stock-code').textContent.toLowerCase();
                
                if (stockName.includes(searchTerm) || stockCode.includes(searchTerm)) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>

